<template>
	<view class="bg-white radius padding margin">
		<view class="flex justify-between">
			<view>{{classTime.title}}</view>
			<button v-show="classTime.isReserved==1" class="cu-btn line-olive sm" @click="handleReserve">预约</button>
			<button v-show="classTime.isReserved!=1" class="cu-btn line-blue sm" @click="handleUnReserve">已预约</button>
		</view>
		<view class="flex align-center justify-between margin-top-sm">
			<view>
				{{ parseTime(classTime.startTime, '{y}-{m}-{d} {h}:{i}') }}
				——
				{{parseTime(classTime.endTime, '{h}:{i}')}}
			</view>
			<view>{{classTime.place}}</view>
		</view>
	</view>
</template>

<script>
	import { parseTime } from "@/utils/parse.js"
	import { reserveTime, unReservedTime } from "@/api/course-time.js"
	
	export default {
		name:"class-time-item",
		props:{
			classTime: {
				required: true,
				type: Object
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			parseTime,
			// 预约课程
			handleReserve() {
				reserveTime(this.classTime.id).then(res => {
					this.classTime.isReserved=0
					this.$store.commit("course/set_classTimeRefresh", true)
				})
			},
			// 取消预约
			handleUnReserve() {
				unReservedTime(this.classTime.id).then(res => {
					this.classTime.isReserved=1
					this.$store.commit("course/set_classTimeRefresh", true)
				})
			}
		}
	}
</script>

<style>

</style>
